<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../utils/vue.min.js"></script>
		<!-- 引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button class="get" @click="getRequest()">get请求</button>
			<button class="post" @click="postRequest()">post请求</button>
			<p>{{joke}}</p>
		</div>
	</body>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				joke:"笑话"
			},
			methods: {
				/**
				 * 接口1：随机笑话
				 * 请求地址：https://autumnfish.cn/api/joke/list
				 * 请求方法：get
				 * 请求参数：num（笑话条数，数字）
				 * 响应内容：随机笑话
				 * */
				getRequest: function() {
					var that = this; 
					axios.get('https://autumnfish.cn/api/joke/list?num=3').then(
						function(response) {
							// console.log(response);
							// axios回调函数中的this已经改变,无法访问到data中的数据
							that.joke = response.data.jokes;
						}, function(err) {
							console.log(err)
						}
					);
				},
				/**
				 * 接口2：用户注册
				 * 请求地址：
				 * 请求方法：post
				 * 请求参数：username（用户名，字符串）
				 * 响应内容：注册成功或失败
				 * */
				postRequest: function() {
					axios.post('https://autumnfish.cn/api/user/reg', {username: 'jack'}).then(
						function(response) {
							console.log(response);
						}, function(err) {
							console.log(err);
						}
					);
				}
			}
		})
	</script>
</html>
